<!-- 消息通知 -->
<template>
  <div key="notify" class="rightView">
    <div class="rightViewLeftWrapper">
      <div class="followWrapper">
        <div class="top10Wrapper">
          <div class="top10">
            <h2 class="h2">top10</h2>
          </div>
          <ul>
            <li
              class="follow"
              v-for="(item, index) in 10"
              :key="index"
              @click="toDetail(index)"
            >
              <img
                class="left"
                :src="require('~/assets/images/1.png')"
                width="45"
                height="45"
                alt="avatar"
              />
              <div class="right">
                <div class="name">KenNaNa</div>
                <div class="num">1111 followers</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="hot10Wrapper">
          <div class="hot10">
            <h2 class="h2">hot10</h2>
          </div>
          <ul>
            <li class="follow" v-for="(item, index) in 10" :key="index">
              <img
                class="left"
                :src="require('~/assets/images/1.png')"
                width="45"
                height="45"
                alt="avatar"
              />
              <div class="right">
                <div class="name">KenNaNa</div>
                <div class="num">1111 followers</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="rightViewCenterWrapper">
      <nuxt />
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'nuxt-property-decorator'
import { BaseVue } from '@/plugins/base-vue'
@Component({})
export default class Notify extends BaseVue {
  toDetail(index: number) {
    this.$router.push(`/earth/notify/${index}`)
  }
}
</script>

<style lang="scss" scope>
</style>